<template>
<div id="main-tab-bar" >
  <tab-bar>
  <tab-bar-item :path="categories" >
    <img slot="item-icon" src="../assets/img/tabbar/categories.png" alt="">
    <img slot="item-icon-active" src="../assets/img/tabbar/categories_active.png" alt="">
    <div slot="item-text">
      categories
    </div>
  </tab-bar-item>
  <tab-bar-item :path="home">
    <img slot="item-icon" src="../assets/img/tabbar/home.png" alt="">
    <img slot="item-icon-active" src="../assets/img/tabbar/home_active.png" alt="">
    <div slot="item-text">
      home
    </div>
  </tab-bar-item>
  <tab-bar-item :path="shopcart">
    <img slot="item-icon" src="../assets/img/tabbar/shopcart.png" alt="">
    <img slot="item-icon-active" src="../assets/img/tabbar/shopcart_active.png" alt="">
    <div slot="item-text">
      shop cart
    </div>
  </tab-bar-item>
  <tab-bar-item :path="me">
    <img slot="item-icon" src="../assets/img/tabbar/profile.png" alt="">
    <img slot="item-icon-active" src="../assets/img/tabbar/profile_active.png" alt="">
    <div slot="item-text">
      me
    </div>
  </tab-bar-item>
  </tab-bar>
</div>
</template>

<script>
import TabBar from "./tabbar/TabBar";
import TabBarItem from "./tabbar/TabBarItem";
export default {
name: "MainTabBar",
  components:{
    TabBar,
    TabBarItem
  },
  data(){
    return {
      categories:"/categories",
      home:"/home",
      shopcart:"/shopcart",
      me:"/me",
    }
  }
}
</script>

<style scoped>

</style>